.dropdown{
  .dropdown-menu{
    background-color: $pale-bg;
    border: 0 none;
    border-radius: $border-radius-extreme;
    display: block;
    margin-top: 0.625em;
    padding: 0em;
    position: absolute;
    visibility: hidden;
    z-index: 1000;

    @include opacity(0);
    @include box-shadow($dropdown-shadow);

    .divider{
      background-color: $medium-pale-bg;
      margin: 0em;
    }

    .dropdown-header{
      color: $dark-gray;
      font-size: $font-size-small;
      padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
    }

    .no-notification{
      color: #9A9A9A;
      font-size: 1.2rem;
      padding: 1.875em 1.875em;
      text-align: center;
    }

    .dropdown-item{
      color: $font-color !important;
      font-size: $font-size-base;
      padding: 0.625em 2.8125em 0.625em 0.9375em;
      clear: both;
      white-space: nowrap;
      width: 100%;
      display: block;
      &:hover{
        color: $white-color !important;
      }

      img{
        margin-top: -0.1875em;
      }

    }
    .dropdown-item a:focus{
      outline: 0 !important;
    }

    .btn-group.select &{
      min-width: 100%;
    }

    .dropdown-item:first-child a,
    .dropdown-item:first-child{
      border-top-left-radius: $border-radius-extreme;
      border-top-right-radius: $border-radius-extreme;
    }

    .dropdown-item:last-child a,
    .dropdown-item:last-child{
      border-bottom-left-radius: $border-radius-extreme;
      border-bottom-right-radius: $border-radius-extreme;
    }

    .select & .dropdown-item:first-child{
      border-radius: 0;
      border-bottom: 0 none;
    }

    .dropdown-item a:hover,
    .dropdown-item a:focus{
      color: $white-color;
      opacity: 1;
      text-decoration: none;

    }
    .dropdown-item:hover,
    .dropdown-item:focus{
      background-color: $default-color;
    }

    &.dropdown-primary .dropdown-item:hover,
    &.dropdown-primary .dropdown-item:focus{
      background-color: $bg-primary;
    }
    &.dropdown-info .dropdown-item:hover,
    &.dropdown-info .dropdown-item:focus{
      background-color: $bg-info;
    }
    &.dropdown-success .dropdown-item:hover,
    &.dropdown-success .dropdown-item:focus{
      background-color: $bg-success;
    }
    &.dropdown-warning .dropdown-item:hover,
    &.dropdown-warning .dropdown-item:focus{
      background-color: $bg-warning;
    }
    &.dropdown-danger .dropdown-item:hover,
    &.dropdown-danger .dropdown-item:focus{
      background-color: $bg-danger;
    }

  }
  .dropdown-divider{
    margin: 0 !important;
  }
  &:hover{
    cursor: pointer;
  }
  &.show .dropdown-menu{
    @include opacity(1);
    visibility: visible;
  }
}

//fix bug for the select items in btn-group
.btn-group.select{
  // overflow: hidden;
}
.btn-group.select.open{
  overflow: visible;
}
.dropdown-menu-right{
  right: -0.125em;
  left: auto;
}

//  the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file
//  code from _responsive.scss

@media (min-width: 768px){
  .navbar-form {
    margin-top: 1.3125em;
    margin-bottom: 1.3125em;
    padding-left: 0.3125em;
    padding-right: 0.3125em;
  }
  .navbar-search-form{
    display: none;
  }
  .navbar-nav .dropdown-item .dropdown-menu,
  .dropdown .dropdown-menu,
  .dropdown-btn .dropdown-menu{
    transform: translate3d(0em, -2.5em, 0em);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
  }
  .navbar-nav .dropdown-item.show .dropdown-menu,
  .dropdown.show .dropdown-menu,
  .dropdown-btn.show .dropdown-menu{
    transform: translate3d(0em, 0em, 0em);
    visibility: visible !important;
  }
  .bootstrap-select .dropdown-menu{
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    -ms-transition: all 150ms linear;
    transition: all 150ms linear;
  }
  .bootstrap-datetimepicker-widget{
    visibility: visible !important;
    @include opacity(1);
  }

  .dropup.show .dropdown-menu{
    -webkit-transform: translate3d(0, -0.625em, 0);
    -moz-transform: translate3d(0, -0.625em, 0);
    -o-transform: translate3d(0, -0.625em, 0);
    -ms-transform: translate3d(0, -0.625em, 0);
    transform: translate3d(0, -0.625em, 0);
    opacity: 1;
    visibility: visible;
  }
  .dropup .dropdown-menu{
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
    -webkit-transform: translate3d(0, 1.875em, 0);
    -moz-transform: translate3d(0, 1.875em, 0);
    -o-transform: translate3d(0, 1.875em, 0);
    -ms-transform: translate3d(0, 1.875em, 0);
    transform: translate3d(0, 1.875em, 0);
    opacity: 0;
    visibility: hidden;
    display: block;
  }

  .bootstrap-select .show .dropdown-menu{
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
    transform: translate3d(0em, 0em, 0em);
  }

  .navbar-nav .dropdown-menu:before,
  #dropdown-row .dropdown .dropdown-menu:before,
  .card.card-just-text .dropdown .dropdown-menu:before,
  .card-just-text .dropdown .dropdown-menu:before,
  .dropdown-btn .dropdown-menu:before{
    border-bottom: 0.6875em solid $medium-pale-bg;
    border-left: 0.6875em solid rgba(0, 0, 0, 0);
    border-right: 0.6875em solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    position: absolute;
    right: 0.75em;
    top: -0.6875em;
  }

  #dropdown-row .dropdown .dropdown-menu:before{
    left: 0.75em !important;
    right: auto;
  }
  .navbar-nav .dropdown-menu:after,
  #dropdown-row .dropdown .dropdown-menu:after,
  .card.card-just-text .dropdown .dropdown-menu:after,
  .card-just-text .dropdown .dropdown-menu:after,
  .dropdown-btn .dropdown-menu:after{
    border-bottom: 0.6875em solid $white-color;
    border-left: 0.6875em solid rgba(0, 0, 0, 0);
    border-right: 0.6875em solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    position: absolute;
    right: 0.75em;
    top: -0.625em;
  }
  #dropdown-row .dropdown .dropdown-menu:after{
    left: 0.75em !important;
    right: auto;
  }
  #dropdown-row .dropdown .dropdown-menu{
    left: 0.9375em;
  }
  .navbar-nav.navbar-right li .dropdown-menu:before,
  .navbar-nav.navbar-right li .dropdown-menu:after{
    left: auto;
    right: 0.75em;
  }


  .footer:not(.footer-big){
    nav ul{
      li:first-child{
        margin-left: 0;
      }
    }
  }

  // no dragging the others navs in page
  body > .navbar-collapse.collapse{
    display: none !important;
  }
}

#navbar {
  .dropdown-menu {
    .dropdown-item{
      padding: .1875em 1.5rem !important;
    }
  }
}
.dropdown-sharing{

  li{
    color: $font-color;
    font-size: $font-size-base;

    .social-line{
      line-height: 1.75em;
      padding: 0.625em 1.25em 0.3125em 1.25em;

      [class*="icon-"]{
        font-size: 1.25rem;
      }
    }
  }

  li:hover,
  li:focus{
    .social-line,
    a,
    .action-line{
      background-color: $white-color;
      color: $font-color;
      opacity: 1;
      text-decoration: none;
    }
  }
}
.show .dropdown-sharing{
  margin-bottom: 0.0625em;
  li:last-child{
    padding: 0.625em 0.9375em;
  }
}
.show .dropdown-actions{
  margin-bottom: 0.0625em;
}

.dropdown-actions{
  li{
    margin: -0.9375em 2.1875em;
    .action-line{
      padding: 0.3125em 0.625em;
      line-height: 1.5em;
      font-weight: bold;
      [class*="icon-"]{
        font-size: 1.5rem;
      }
      .col-sm-9{
        line-height: 2.125em;
      }
    }
    .link-danger{
      color: $danger-color;
      &:hover, &:active, &:focus{
        color: $danger-color;
      }
    }
  }
  li:hover,
  li:focus{
    a{
      color: $font-color;
      opacity: 1;
      text-decoration: none;
    }
  }
  .action-line{
    .icon-simple{
      margin-left: -0.9375em;
    }
  }
}
.dropup .dropdown-menu:before{
  border-top: 0.6875em solid #DCD9D1;
  border-left: 0.6875em solid transparent;
  border-right: 0.6875em solid transparent;
  content: "";
  display: inline-block;
  position: absolute;
  right: 0.75em;
  bottom: -0.75em;
}
.dropup .dropdown-menu:after{
  border-top: 0.6875em solid #FFF;
  border-left: 0.6875em solid transparent;
  border-right: 0.6875em solid transparent;
  content: "";
  display: inline-block;
  position: absolute;
  right: 0.75em;
  bottom: -0.6875em;
}

.dropup,
.dropdown{
  .dropdown-toggle:after{
    margin-left: 0.3125em;
  }
}

.dropdown-notification{
  .dropdown-notification-list{
    & li{
      border-bottom: 0.0625em solid #F1EAE0;
      color: #66615b;
      font-size: 1rem;
      padding: 0.625em 0.3125em;
      width: 20.625em;

      & a{
        color: #66615b;
        white-space: normal;

        & .notification-text{
          padding-left: 2.5em;
          position: relative;

          & .label{
            display: block;
            position: absolute;
            top: 50%;
            margin-top: -0.75em;
            left: 0.4375em;
          }
          & .message{
            font-size: 0.9rem;
            line-height: 0.7;
            margin-left: 0.625em;
          }
          & .time{
            color: #9A9A9A;
            font-size: 0.7rem;
            margin-left: 0.625em;
          }
        }
        & .read-notification{
          font-size: 0.75rem;
          opacity: 0;
          position: absolute;
          right: 0.3125em;
          top: 50%;
          margin-top: -0.75em;
        }
      }
      &:hover{
        background-color: #F0EFEB;
        color: #66615b;
        opacity: 1;
        text-decoration: none;

        & .read-notification{
          opacity: 1 !important;
        }
      }
    }
  }
  .dropdown-footer{
    background-color: #E8E7E3;
    border-radius: 0 0 0.5em 0.5em;

    .dropdown-footer-menu{
      list-style: outside none none;
      padding: 0em 0.3125em;
      li{
        display: inline-block;
        text-align: left;
        padding: 0 0.625em;

        a{
          color: #9C9B99;
          font-size: 0.9rem;
          line-height: 2.1875em;
        }
      }
    }
  }
}
.navbar-nav.mr-auto .dropdown-menu:before,
.navbar-nav.mr-auto .dropdown-menu:after{
  left: 0.75em !important;
  right: auto;
}
